<template>
    <div class="wrapper">
        <header>
            <i @click="goBack()" class="fa fa-angle-left"></i>
            <p>{{ name }}</p>
        </header>
    </div>
</template>

<script>

export default {
    name: "Header",
    props: {
        name: {
            // 声明类型
            type: String,

            //声明是否必需
            require: true,

            // 声明默认值
            // default: 'header标题',

        },
    },

    methods: {
        goBack() {
            this.$router.go(-1);
        }
    }
}
</script>

<style >
/**************************总容器**************************/
.wrapper {
    width: 100%;
    /* position: fixed; */
}

/**************************header**************************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #FFF;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    /* 水平居中 垂直居中 */
    justify-content: center;
    align-items: center;
}

.wrapper header .fa-angle-left {
    font-size: 7vw;
    margin-left: -33vw;
    margin-right: 30vw;
    /* left: 30px; */
}
</style>